<template>
  <!-- 找回密码（设置新密码）-->
  <div>
    <div class="i-top">
      <div class="wrap">
        <div class="logo">
          <a href="https://www.liepin.com/" title="猎聘网"></a>
        </div>
      </div>
    </div>
    <div class="main">
      <h1>找回密码</h1>
      <div class="passport-progress">
        <el-steps :active="active" finish-status="success" simple>
          <el-step title="验证身份" icon="el-icon-edit"></el-step>
          <el-step title="设置新密码" icon="el-icon-upload"></el-step>
          <el-step title="完成" icon="el-icon-picture"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="content">
      <el-form ref="forms" :model="forms" :rules="rules">
        <el-form-item label="新密码：" prop="password1" >
          <el-input
            v-model="forms.password1"
            placeholder="密码只能输入8-16位，其中必须包含数字、字母"
            show-password
          ></el-input>
        </el-form-item>
        <tr>
          <td>
            <div class="text-muted" style="color: #999">
              字符仅支持“!、@、#、$、%”，不支持空格
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <ul class="password-strong">
              <li>弱</li>
              <li>中</li>
              <li>强</li>
            </ul>
          </td>
        </tr>
        <el-form-item label="确认密码：" prop="password2">
          <el-input v-model="forms.password2" placeholder="确认密码" show-password>></el-input>
        </el-form-item>
        <el-button type="primary" @click="onSubmit('forms')">确定</el-button>
      </el-form>
    </div>
    <div class="footer">
      <div class="copyright">
        <div class="copy-side">
          <i class="icon-16 icon-bottom-phone"></i>服务热线：400-6212-266
        </div>
        <div class="copy-main">
          <p>
            <a
              href="http://www.liepin.com/about/introduction.shtml"
              target="blank"
              >猎聘简介 |</a
            >
            <a href="http://www.liepin.com/inshr/index.shtml" target="blank"
              >加入猎聘 |</a
            >
            <a
              href="http://www.liepin.com/about/innovation.shtml"
              target="blank"
              >创新优势 |</a
            >
            <a href="http://www.liepin.com/user/agreement.shtml" target="blank"
              >用户协议 |</a
            >
            <a
              href="https://lpt.liepin.com/pdfview/displayagreement?type=014"
              target="blank"
              >隐私条款 |</a
            >
            <a
              href="http://www.liepin.com/about/mediareports.shtml"
              target="blank"
              >媒体报道 |</a
            >
            <a href="http://www.liepin.com/about/about_us.shtml" target="blank"
              >联系我们 |</a
            >
            <a href="http://www.liepin.com/sitemap.shtml" target="blank"
              >网站地图 |</a
            >
            <a href="http://www.liepin.com/cooperation.shtml" target="blank"
              >网站合作 |</a
            >
            <a
              data-selector="suggest"
              href="http://www.liepin.com/user/feedback/"
              target="blank"
              >意见反馈 |</a
            >
            <a href="http://www.liepin.com/" target="blank">猎聘</a>
          </p>
        </div>
        <div class="copy-footer">
          <p>
            <a
              class="police-record"
              href="http://www.beian.miit.gov.cn"
              target="_blank"
              style="color: rgb(153, 153, 153)"
              >京ICP备09083200号</a
            >
            合字B2-20160007
            <a
              class="police-record"
              href="https://www.liepin.com/about/business-license.shtml"
              target="_blank"
              style="color: rgb(153, 153, 153)"
              >营业执照</a
            >
            <a
              class="police-record"
              href="https://www.liepin.com/about/hrs-license.shtml"
              target="_blank"
              style="color: rgb(153, 153, 153)"
              >人才服务许可证:120116174002号</a
            >
            <a
              class="police-record"
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502035189"
              style="color: rgb(153, 153, 153)"
            >
              <img src="" />
              <span>京公网安备 11010502035189号</span>
            </a>
          </p>
          <p class="reserved">
            Copyright © 2006-2020 liepin.com All Rights Reserved
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: {
        password1: "",
        password2: "",
      },
      active: 1,
      rules: {
        password1: [
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" },
        ],
        password2: [
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    onSubmit(formsName) {
      this.$refs[formsName].validate((valid) => {
        if (valid) {
          if (this.forms.password1 == this.forms.password2){
            this.$axios({
              method:"POST",
              url:'api/retrievePwd',
              data:{
                phone_num:this.$route.params.p_num,
                Verification_code:this.$route.params.p_code,
                password:this.forms.password1,
              }
            }).then(data=>{
              // console.log(data.data);
              this.$message({
                showClose: true,
                message: "修改成功，请登录！",
                type: "success",
              });
              this.$router.push({
                path:'/indexPage',
              })
            }).catch(error=>{
              console.log(error);
            })
          }else {
            this.$message({
              showClose: true,
              message: "两次密码不一致！",
              type: "error",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
